<template>
  <div class="layui-fluid">
    <div class="layui-card">
      <div
        class="layui-form layui-card-header layuiadmin-card-header-auto"
        style="padding: 15px 15px 0px 15px"
      >
        <div class="layui-row">
          <div class="layui-col-md6">
            <div class="layui-form-item">
              <label class="layui-form-label">节点名称</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="node.taskName"
                  class="layui-input layui-disabled"
                  readonly="readonly"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md6">
            <div class="layui-form-item">
              <label class="layui-form-label">节点标识</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="node.taskNodeId"
                  class="layui-input layui-disabled"
                  readonly="readonly"
                />
              </div>
            </div>
          </div>
        </div>
        <InterfaceConfig
          v-if="isRefresh"
          ref="config"
          :config="node.interfaceConfig"
        ></InterfaceConfig>
        <div class="layui-row">
          <div class="layui-col-md3" v-if="node.taskType == 'userTask'">
            <div class="layui-form-item">
              <label class="layui-form-label">任务时限</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="node.timeout"
                  lay-verify="number"
                  maxlength="5"
                  class="layui-input"
                  placeholder="请输入任务时限"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3" v-if="node.taskType == 'userTask'">
            <div class="layui-form-item">
              <label class="layui-form-label">任务时限类型</label>
              <div class="layui-input-block">
                <select
                  lay-filter="change"
                  lay-event="getTaskTimeoutType"
                  :lay-select="node.timeoutType.id"
                >
                  <option value="">--请选择--</option>
                  <option
                    v-for="(ch, chIndex) in dataType"
                    :value="ch.id"
                    v-html="ch.desc"
                  ></option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3" v-if="node.taskType == 'userTask'">
            <div class="layui-form-item">
              <label class="layui-form-label">临期时限</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="node.approachTimeout"
                  lay-verify="number"
                  maxlength="5"
                  class="layui-input"
                  placeholder="请输入任务时限"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3" v-if="node.taskType == 'userTask'">
            <div class="layui-form-item">
              <label class="layui-form-label">临期时限类型</label>
              <div class="layui-input-block">
                <select
                  lay-filter="change"
                  lay-event="getApproachTimeoutType"
                  :lay-select="node.approachTimeoutType.id"
                >
                  <option value="">--请选择--</option>
                  <option
                    v-for="(ch, chIndex) in dataType"
                    :value="ch.id"
                    v-html="ch.desc"
                  ></option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3" v-if="node.taskType == 'userTask'">
            <div class="layui-form-item">
              <label class="layui-form-label">超时开启类型</label>
              <div class="layui-input-block">
                <select
                  lay-filter="change"
                  lay-event="getTaskStartTimeoutType"
                  :lay-select="node.startTimeoutType"
                >
                  <option value="create">任务创建时</option>
                  <option value="claim">任务签收时</option>
                </select>
              </div>
            </div>
          </div>
          <div class="layui-col-md3" v-if="node.taskType != 'userTask'">
            <div class="layui-form-item">
              <label class="layui-form-label">异常处理</label>
              <div class="layui-input-block">
                <select
                  lay-filter="change"
                  lay-event="getStartChange"
                  :lay-select="node.exceptionType"
                >
                  <option value="">请选择</option>
                  <option value="1">忽略异常</option>
                  <option value="2">流程挂起</option>
                  <option value="3">流程回滚至审批</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-row" style="text-align: center; padding-bottom: 15px">
          <button
            class="layui-btn layui-btn-normal"
            v-on:click="saveNodeInfo"
            lay-submit
          >
            <i class="layui-icon icon-add-fill"></i>提交
          </button>
          <button class="layui-btn layui-btn-danger" v-on:click="testInterface">
            <i class="layui-icon icon-tools-fill"></i>测试运行
          </button>
          <button
            class="layui-btn layui-btn-warm"
            v-on:click="showReturnParams"
          >
            <i class="layui-icon icon-eye-fill"></i>返回参数格式
          </button>
        </div>
      </div>
    </div>
    <div id="interfaceFormat" v-if="isRefresh">
      <JsonView :dataResult="defaultData" :errorData="errorData"></JsonView>
    </div>
  </div>
</template>
<script>
import JsonView from "../../../common/JsonView.vue";
import InterfaceConfig from "../../../common/InterfaceConfig";
export default {
  name: "ProcessNode",
  components: { JsonView, InterfaceConfig },
  data: function () {
    return {
      node: {
        timeoutType: {
          id: null,
        },
      },
      defaultData: {},
      errorData: {},
      interfaceInfo: "",
      isRefresh: false,
      dataType: {},
    };
  },
  mounted: function () {
    this.initLayui();
    //设置参数信息
    this.node.id = this.$route.query.id;
    this.node.taskType = "userTask";
    this.initLoadData();
    this.loadDateType();
  },
  methods: {
    loadDateType: function () {
      var that = this;
      this.post(this.common + "/dataType", function (data) {
        if (data.code == "000000") {
          that.dataType = data.result;
        } else {
          that.openMsg(data.msg, false);
        }
      });
    },
    initLoadData: function () {
      var that = this;
      this.post(
        this.activitiTaskConfig + "/taskConfigInfo",
        {
          taskConfigId: this.node.id,
        },
        function (data) {
          if (data.code == "000000") {
            if (!that.checkIsNull(data.result)) {
              that.node = data.result;
              if (that.node.timeoutType == null) {
                that.node.approachTimeoutType = {};
              }
              if (that.node.timeoutType == null) {
                that.node.approachTimeoutType = {};
              }
            }
            that.isRefresh = true;
          }
        }
      );
    },
    getTaskTimeoutType: function (data) {
      this.node.timeoutType.id = data;
    },
    getApproachTimeoutType: function (data) {
      this.node.approachTimeoutType.id = data;
    },
    getTaskStartTimeoutType: function (data) {
      this.node.startTimeoutType = data;
    },
    saveNodeInfo: function () {
      var that = this;
      var result = this.checkNodeInfo(this);
      if (result) {
        this.node.taskConfigId = this.node.id;
        this.post(
          this.activitiProcess + "/saveNodeInterface",
          this.node,
          function (data) {
            if (data.code != "000000") {
              that.showMsg(data.msg);
            } else {
              that.openMsg(data.msg, true);
            }
          }
        );
      }
    },
    testInterface: function () {
      var that = this;
      var result = this.checkNodeInfo(this);
      if (result) {
        this.post(
          this.activitiProcess + "/nodeInterCall",
          this.node.interfaceConfig,
          function (data) {
            if (data.code != "000000") {
              that.showMsg(data.msg);
            } else {
              that.defaultData = data.result;
              that.errorData = null;
              that.showParam();
            }
          }
        );
      }
    },
    checkNodeInfo: function () {
      var config = this.$refs.config;
      if (this.checkIsNull(this.node.id)) {
        this.showMsg("数据格式有误，请关闭页面重新进入");
        return false;
      }
      var isOk = config.checkNodeInfo();
      if (!isOk) {
        return false;
      } else {
        this.node.interfaceConfig = config.getData();
      }
      if (this.node.taskType == "serviceTask") {
        if (this.checkIsNull(e.node.exceptionType)) {
          this.showMsg("请选择异常处理");
          return false;
        }
      }
      if (
        !this.checkIsNull(this.node.timeout) &&
        this.checkIsNull(this.node.timeoutType.id)
      ) {
        this.showMsg("请选择任务时限类型");
        return false;
      }
      if (
        !this.checkIsNull(this.node.approachTimeout) &&
        this.checkIsNull(this.node.approachTimeoutType.id)
      ) {
        this.showMsg("请选择临期时限类型");
        return false;
      }
      return true;
    },
    showReturnParams: function () {
      switch (this.node.taskType) {
        case "userTask":
          {
            this.defaultData = {
              code: "为000000时接口调用成功",
              msg: "操作成功",
              reuslt: {
                variable:
                  "接口调用是会返回variable参数集合信息，包含用户任务当前任务所需的变量信息",
                variable1: "",
                variable2: "",
              },
            };
            this.errorData = {
              code: "不为000000时接口调用失败，调用失败可以包含结果集result",
              msg: "xxxxxx错误",
              result: null,
            };
          }
          break;
        case "serviceTask":
          {
            this.defaultData = {
              code: "为000000时接口调用成功",
              msg: "操作成功",
              reuslt: {},
            };
            this.errorData = {
              code: "不为000000时接口调用失败，调用失败可以包含结果集result",
              msg: "xxxxxx错误",
              result: null,
            };
          }
          break;
      }
      this.showParam();
    },
    showParam: function () {
      this.isRefresh = true;
    },
  },
  updated: function () {
    this.initLayui();
  },
};
</script>